export const getLineChart = (
  title: string,
  data: any,
  axisName: string,
  unit: string,
  type: string,
  chartsType: string,
) => {
  // const dataTimeArray =  data?.map((item: any) => item.dataTime.split(' ')[1]);

  const dataTimeArray = data?.map((item: any) => item.dataTime);
  console.log('dataTimeArray=====', dataTimeArray.reverse());

  let currentArray = []
  let voltageArray = []
  let currentMeasureArray = []
  let voltageMeasureArray = []
  if (chartsType == '1') {
    currentArray = data.map((item: any) => item.current);
    voltageArray = data.map((item: any) => item.voltage);
    console.log('voltageArray==22222===', voltageArray);
    console.log('currentArray==11111===', currentArray);
  } else if (chartsType == '2') {
    // 需求电流
    currentArray = data.map((item: any) => item.currentRequirement);
    // 需求电压
    voltageArray = data.map((item: any) => item.voltageRequirement);
    // 输出电流
    currentMeasureArray = data.map((item: any) => item.currentMeasurement);
    // 输出电压
    voltageMeasureArray = data.map((item: any) => item.voltageMeasurement);

  }

  return {
    title: {
      text: title,
      left: 22,
      textStyle: {
        fontSize: 12,
        lineHeight: 20,
        color: '#555555',
      },
    },
    legend: {
      show: true,
      itemWidth: 20,
      itemHeight: 1,
      itemGap: 10,
      right: 22,
      data: [`需求${axisName}`, `实际${axisName}`]
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
      },
      formatter(params: Array<any>) {
        let html = `<div class="tbox"><div>${params[0].name}</div>`;
        params.forEach(item => {
          html += `<div class="showBox">
												<div style="display:flex;">
                          <div style="width: 6px;height: 6px;margin:8px 8px 0 0;background: ${item.color};border-radius: 5px;"></div>
                          <span style="flex:1;color:${item.color}">${item.seriesName}：</span>
                          <span style="float:right;">${item.value} ${unit}</span>
                        </div>
										</div>`;
        });
        html += '</div>';
        return html;
      },
    },
    grid: {
      top: '30px',
      bottom: '30px',
      left: '52px',
      right: '22px',
      // containLabel: true, // 是否显示刻度
    },
    xAxis: {
      type: 'category',
      data: dataTimeArray.reverse(),
    },
    yAxis: [
      {
        type: 'value',
        // alignTicks: true,
        axisLabel: {
          formatter: '{value}',
        },
      },
    ],
    series: [
      {
        name: `需求${axisName}`,
        data: type === '2' ? currentArray : voltageArray ?? [], // 电压1， 电流2
        hoverAnimation: false,
        symbolSize: 6,
        type: 'line',
        itemStyle: {
          emphasis: {
            symbolSize: 3,
            borderWidth: 3,
            color: '#FA3939',
          },
          normal: {
            borderWidth: 10,
            color: '#FA3939',
            lineStyle: {
              color: '#FA3939',
            },
          },
        },
      },
      {
        name: `实际${axisName}`,
        data: type === '2' ? currentMeasureArray : voltageMeasureArray ?? [],
        hoverAnimation: false,
        symbolSize: 6,
        type: 'line',
        itemStyle: {
          emphasis: {
            borderWidth: 3,
            color: '#5073F7',
          },
          normal: {
            color: '#5073F7',
            lineStyle: {
              color: '#5073F7',
            },
          },
        },
      },
    ],
  };
};

export const getGunLineChart = (
  title: string,
  data: any,
  unit: string,
) => {
  // const dataTimeArray =  data?.map((item: any) => item.dataTime.split(' ')[1]);
  const dataTimeArray = data?.map((item: any) => item.dataTime);
  const gunTemperature = data?.map((item: any) => item.gunTemperature);
  return {
    title: {
      text: title,
      left: 22,
      textStyle: {
        fontSize: 12,
        lineHeight: 20,
        color: '#555555',
      },
    },
    legend: {
      show: true,
      itemWidth: 20,
      itemHeight: 1,
      itemGap: 10,
      right: 22,
      data: ['枪线温度']
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
      },
      formatter(params: Array<any>) {
        let html = `<div class="tbox"><div>${params[0].name}</div>`;
        params.forEach(item => {
          html += `<div class="showBox">
												<div style="display:flex;">
                          <div style="width: 6px;height: 6px;margin:8px 8px 0 0;background: ${item.color};border-radius: 5px;"></div>
                          <span style="flex:1;color:${item.color}">${item.seriesName}：</span>
                          <span style="float:right;">${item.value} ${unit}</span>
                        </div>
										</div>`;
        });
        html += '</div>';
        return html;
      },
    },
    grid: {
      top: '30px',
      bottom: '30px',
      left: '52px',
      right: '22px',
      // containLabel: true, // 是否显示刻度
    },
    xAxis: {
      type: 'category',
      data: dataTimeArray,
    },
    yAxis: [
      {
        type: 'value',
        // alignTicks: true,
        axisLabel: {
          formatter: '{value}',
        },
      },
    ],
    series: [
      {
        name: '枪线温度',
        data: gunTemperature,
        hoverAnimation: false,
        symbolSize: 6,
        type: 'line',
        itemStyle: {
          emphasis: {
            borderWidth: 3,
            color: '#5073F7',
          },
          normal: {
            color: '#5073F7',
            lineStyle: {
              color: '#5073F7',
            },
          },
        },
      },
    ],
  };
};

